<template>
      <div class="fns clearfix">
                   <span class="fn_add cur" title="添加到播放里列表" @mousedown="add"></span>
                   <span class="col cur" title="收藏"></span>
                   <span class="share cur" title="分享"></span>
                   <span class="dl cur" title="下载"></span>
      </div>
</template>

<script>
export default {
    name:'Fns',
    data(){
        return {
           date_music:[],
        }
    },
    props:['song'],
    methods:{
      add(){
    
        
        this.$bus.$emit('addPlayList',this.song)
      }
    }
   
}
</script>

<style lang='less' scoped>
 .fn_add {
  float: left;
  width: 13px;
  height: 13px;
  background:url(../images/icon.png) no-repeat 0 -700px;
  &:hover{
    background:url(../images/icon.png) no-repeat -22px -700px;
  }
}
.col {
  float: left;
  width: 18px;
  height: 14px;
  background: url(../images/table.png) no-repeat 0 -174px;
   &:hover{
    background:url(../images/table.png) no-repeat -20px -174px;
  }
}
.fns {
  
  span {
    margin: 0 5px 0 0;
  }
}
.share {
   float: left;
  width: 18px;
  height: 14px;
  background: url(../images/table.png) no-repeat 0 -195px;
   &:hover{
    background:url(../images/table.png) no-repeat -20px -195px;
  }
}
.dl {
  float: left;
  width: 18px;
  height: 14px;
  background: url(../images/table.png) no-repeat -81px -174px;
   &:hover{
    background:url(../images/table.png) no-repeat -104px -174px;
  }
}
.cur {
  cursor: pointer;
}
</style>